import { CommandLabeledItemWrapper } from '@app-base/common/components/command-form/item-wrapper';
import { MouseActionInput } from '@app-base/common/components/pick-input/mouse-action-input';
import { Icon } from '@amcax/base';
import { PickInputEvents } from '@app-base/common/components/pick-input/types';
import { userEvents } from '@app-base/module';
import { Props } from './type';

const XYZ = ['X', 'Y', 'Z'];
export function ComCommand({
  label,
  isActive,
  onFocus,
  cmdRef,
  options,
  param,
  relyKey = 'relyOn1',
  onRemove,
}: Props) {
  const register = () => {
    unRegister();
    userEvents.emit(PickInputEvents.Input3dFocused);
    userEvents.on(PickInputEvents.Input3dFocused, unRegister);
  };
  const unRegister = () => {
    userEvents.off(PickInputEvents.Input3dFocused);
  };
  return (
    <CommandLabeledItemWrapper
      textClassName='text-reset'
      className='mt-2 px-5'
      label={label}>
      <MouseActionInput
        active={isActive}
        onActiveFocus={() => {
          register();
          onFocus();
          cmdRef?.setFormKey(relyKey);
          if (param.mode === 'vertical') {
            cmdRef.setMode(options);
            relyKey === 'relyOn1' && cmdRef.resetSetting();
          }
        }}
        placeholder='请选择第一个点'
        disabled={false}
        allowSelectFromTreeView>
        {param?.[relyKey]?.entityId && (
          <div className='pick-input_base-select_selection'>
            <div>
              <div>{param[relyKey]?.name}</div>
              <div>
                {param[relyKey]?.point?.map(
                  (v, i) => `${XYZ[i]}:${v.toFixed(2)} `,
                )}
              </div>
            </div>
            <div
              className={'m-auto'}
              onClick={onRemove}>
              <Icon
                tabIndex={0}
                name='commons/close'
              />
            </div>
          </div>
        )}
      </MouseActionInput>
    </CommandLabeledItemWrapper>
  );
}
